<template>
	<div class="robotShopping navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<van-sticky>	
			<div class="rs_top">
				<div @click="tab_index = index" v-for="item,index in 2" :key="index" :class="index == tab_index ? 'on' : ''">
					{{index == 0 ? '购买矿机' : '奖励矿机'}}
				</div>

				<div class="on_sold" :style="tab_index == 0 ? 'left:1.3rem' : 'left:5.05rem' "></div>
			</div>
		</van-sticky>
		
		
		<div v-if="!kjlist" style="text-align: center;padding-top: 2rem;">
			<van-loading size="24px">加载中...</van-loading>
		</div>

		<transition name="fold-right-effect">
			<div style="padding-top: .27rem;position: absolute;" v-if="tab_index == 0">
				<transition name="tabbar-fold">
					<RobotItem v-if="kjlist" :kjlist="kjlist" ></RobotItem>
				</transition>
			</div>
		</transition>

		<transition name="fold-left-effect">
			<div style="padding-top: .27rem;position: absolute;" v-if="tab_index == 1">
				<transition name="tabbar-fold">
					<RobotItem v-if="kjlist" :kjlist="kjlist" :tab_index="tab_index"></RobotItem>
				</transition>
			</div>
		</transition>

	</div>
</template>

<script>
	//矿机列表
	import RobotItem from '../../components/RobotItem.vue'
	export default {
		name: "robotShopping",
		components: {
			RobotItem
		},
		async created() {

			try {

				const data = await this.$apis.Common.kjlist()

				this.kjlist = data.data

			} catch (e) {
				//TODO handle the exception
			}
			

		},
		data() {
			return {
				tab_index: 0,

				kjlist: null,

				jllist: null

			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	@import '../../style/transition.less';

	.robotShopping {


		.rs_top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			height: .88rem;
			background-color: rgb(17,32,55);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
			font-size: .3rem;
			color: #3A627E;

			.on {
				color: #94E9FF;
			}

			.on_sold {
				position: absolute;
				width: 1.18rem;
				height: 2px;
				background-color: #94E9FF;
				bottom: 0;
				transition: all .5s;
			}
		}
	}
</style>
